<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
		<meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
		<link rel="stylesheet" type="text/css" href="../c-asserts/mui/css/mui.min.css" />
		<link rel="stylesheet" type="text/css" href="../c-asserts/mui/css/mui.indexedlist.css" />
		<style>
			html, body {
				height: 100%;
				overflow: hidden;
			}
			li input {
				top: 15px !important;
			}
			li img {
				width: 35px;
				height: 35px;
				vertical-align: middle;
			}
			li span {
				display: inline-block;
				vertical-align: middle;
				padding: 0 5px;
				height: 35px;
				line-height: 35px;
				color: #666666;
			}
			.mui-indexed-list-bar {
				background-color: transparent;
			}
		</style>
	</head>
	<body>
		<div class="">
			<div id='list' class="mui-indexed-list">
				<div class="mui-indexed-list-search mui-input-row mui-search">
					<input type="search" class="mui-input-clear mui-indexed-list-search-input" placeholder="搜索好友">
				</div>
				<div class="mui-indexed-list-bar">
					<a>A</a>
					<a>B</a>
					<a>C</a>
					<a>D</a>
					<a>E</a>
					<a>F</a>
					<a>G</a>
					<a>H</a>
					<a>I</a>
					<a>J</a>
					<a>K</a>
					<a>L</a>
					<a>M</a>
					<a>N</a>
					<a>O</a>
					<a>P</a>
					<a>Q</a>
					<a>R</a>
					<a>S</a>
					<a>T</a>
					<a>U</a>
					<a>V</a>
					<a>W</a>
					<a>X</a>
					<a>Y</a>
					<a>Z</a>
				</div>
				<div class="mui-indexed-list-alert"></div>
				<div class="mui-indexed-list-inner"></div>
			</div>
		</div>
		<script type="text/javascript" src="../c-script/api.js"></script>
		<script type="text/javascript" src="../c-asserts/mui/js/mui.js"></script>
		<script type="text/javascript" src="../c-asserts/mui/js/mui.indexedlist.js"></script>
		<script type="text/javascript" src="../c-script/public.js"></script>
		<script type="text/javascript" src="../c-script/template.js"></script>
		<script type="text/javascript" src="../c-script/jquery-2.1.3.min.js"></script>
		<script type="text/html" id="jb">
			{{if list==null || list.length==0}}
			<div class="mui-indexed-list-empty-alert">没有数据</div>
			{{else}}
			{{each list as value index}}
			<ul class="mui-table-view">
			<li data-group="A" class="mui-table-view-divider mui-indexed-list-group">A</li>
			<li data-value="AKU" data-tags="AKeSu" class="mui-table-view-cell mui-indexed-list-item mui-checkbox mui-left">
			<input type="checkbox" data-userId="{{value.userid}}" data-userName="{{value.username}}"/>
			<img src="{{value.headimgurl}}"width="30" height="30"/>
			<span>{{value.userid}} - {{value.username}}</span>
			</li>
			</ul>
			{{/each}}
			{{/if}}
		</script>
		<script type="text/javascript" charset="utf-8">
			$(document).ready(function() {
				getDatalis();
				mui.init();
				api.addEventListener({
					name : 'ogrTeamCompleteEvent'
				}, function(ret, err) {
					var userId = [];
					$("input[type='checkbox']").each(function() {
						if ($(this).is(':checked')) {
							userId.push({
								userId : $(this).attr("data-userId"),
								userName : $(this).attr("data-userName")
							});
						}
					});
					myPostAjax('team/createTeam.json', {
						code : getUserCode(),
						themeId : api.pageParam.themeid,
						member : userId
					}, function(ret) {
						if (ret && ret.err == 0 && ret.teamId != null && ret.teamId != '') {
							api.openWin({
								name : 'chatWin',
								url : '../team/chat_win.html',
								pageParam : {
									teamId:ret.teamId
								}
							});
						} else {
							api.alert({
								msg : '操作失败，未知异常！'
							});
						}
					});
				});
			}
			mui.ready(function() {
				var list = document.getElementById('list');
				//calc hieght
				list.style.height = document.body.offsetHeight + 'px';
				//create
				window.indexedList = new mui.IndexedList(list);
				//done event
				mui('.mui-indexed-list-inner').on('change', 'input', function() {
					//count 是你选择选项的数量
					var count = list.querySelectorAll('input[type="checkbox"]:checked').length;
				});
			});
			function getDatalis() {
				myPostAjax('user/getFriends.json', {
					code : getUserCode()
				}, function(ret) {
					if (ret.length == 0) {
						myPostAjax('team/createTeam.json', {
							code : getUserCode(),
							themeId : api.pageParam.themeid
						}, function(ret) {
						});
					} else {
						var data = {
							list : ret
						};
						var html = template('jb', data);
						$(".mui-indexed-list-inner").html(html)
					}
				});
			}
		</script>
	</body>
</html>